<template>
	<view class="page">
		<view class="flex flex-column background">
			<u-cell-group>
				<u-cell :border="false">
					<view slot="title" class="flex" @click="goLogin()">
						<u-avatar
							:src="userInfo.avatarUrl?userInfo.avatarUrl:'https://i03piccdn.sogoucdn.com/aa852d73c1dbae45'"
							size="80"></u-avatar>
						<view class="margin-left"></view>
						<u--text size="23px" color="black" :text="userInfo.username"></u--text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="flex flex-column margin-top">
			<view class="background border-radius box-shadow padding orderItem">
				<view v-for="(items,indexs) in list3" :key="indexs" >
					<view class="flex flex-row justify-between background item" @click="toUrl(items.url)">
						<u-icon :name="items.icon" labelSize="35rpx" size="25px" :label="items.name"></u-icon>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<u-divider></u-divider>
				</view>
			</view>
		</view>
		<button @click="logout">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				hasUserInfo: false,
				list3: [{
						name: '我的帖子',
						icon: 'file-text',
						url:'/pages/my/myPosts/myPosts'
					},
					{
						name: '我的订单',
						icon: 'order',
						url:'/pages/my/order/order'
					}
					
					// {
					// 	name: '设置',
					// 	icon: 'setting',
					// 	url:''
					// },
					// {
					// 	name: '我的目的地',
					// 	icon: 'map',
					// 	url:''
					// },
					// {
					// 	name: '清除缓存',
					// 	icon: 'file-text',
					// 	url:''
					// }
				],
				userId: uni.getStorageSync('userId'),
				cacheSize: '0KB'
			};
		},
		onLoad() {
			this.refreshUserInfo();
			this.userId = uni.getStorageSync('userId');
			this.getUserInfo();
			this.getCacheSize();
		},
		onShow() {
			this.refreshUserInfo();
		},
		methods: {
			goLogin() {
				if (!this.userId) {
					uni.navigateTo({
						url: '/pages/my/wxLogin'
					});
				} else {
					const userInfoStr = JSON.stringify(this.userInfo);
					uni.navigateTo({
						url: `/pages/my/editUserInfo?userInfo=${encodeURIComponent(userInfoStr)}`
					});
				}
			},
			refreshUserInfo() {
				this.userInfo = uni.getStorageSync('userInfo') || null;
				this.userId = uni.getStorageSync('userId') || null;
			},
			logout() {
				uni.removeStorageSync('userId');
				uni.removeStorageSync('userInfo');
				this.userInfo = '';
				this.userId = null;
				this.hasUserInfo = false;
				uni.showToast({
					title: '退出登录',
					duration: 2000,
					icon: 'success'
				});
			},
			getUserInfo() {
				uni.request({
					url: `http://localhost:8090/user/${this.userId}`,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							this.userInfo = res.data.data;
							uni.setStorageSync('userInfo', res.data.data);
						} else {
							uni.showToast({
								title: '获取用户信息失败',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			getCacheSize() {
				uni.getStorageInfo({
					success: (res) => {
						this.cacheSize = `${(res.currentSize / 1024).toFixed(2)}KB`;
					}
				});
			},
			toUrl(url) {
				uni.navigateTo({
					url: url,
				});
			},

		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.error-message {
		color: red;
		margin-top: 10px;
	}

	.border_line {
		border: 1px solid black;
	}
</style>